<template>
  <el-dialog 
        custom-class = 'dialog-check-wrap'
        title='表格显示的内容'
        :visible.sync="visible"
        @close='$emit("update:dialogVisible", false)'
        @open='handleOpen'
        size='tiny'
        top='5vh'
       >
       <div class="dialog-check">
         <el-checkbox-group :min="1" v-model = 'colSelected'>
            <p v-for='(k,i) in self_colList' :key='i' class="list">
              <el-checkbox :label='k.value'>{{k.label}}</el-checkbox>
              <span class="index">
                <img src='../../../../static/images/icon_up.svg' :class='{disable:i==0}' @click.stop.lazy='upIndex(i)'>
                <img src='../../../../static/images/icon_down.svg' :class='{disable:i==self_colList.length-1}'  @click.stop.lazy='downIndex(i)'>
              </span>
            </p>
          </el-checkbox-group>
  

       </div>

         <span slot="footer">
          <el-button type='primary' @click.stop="handleSure">保 存</el-button>
        </span>

      </el-dialog>
</template>

<script>
import { Message } from 'element-ui'
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    colList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      visible: false,
      self_colList: [],
      colSelected: []
    }
  },
  watch: {
    dialogVisible (newValue) {
      this.visible = newValue
    }
  },
  methods: {

    handleOpen () {
      this.self_colList = [...this.colList]
      this.colSelected = []
      this.colList.filter(ele => ele.status).forEach(item => {
        this.colSelected.push(item.value)
      });
    },
    upIndex (i) {

      if (i === 0) return

      const a = this.self_colList[i]

      this.self_colList.splice(i, 1, this.self_colList[i - 1])

      this.self_colList.splice(i - 1, 1, a)
    },

    downIndex (i) {
      const len = this.self_colList.length

      if (i === len - 1) return

      const a = this.self_colList[i]

      this.self_colList.splice(i, 1, this.self_colList[i + 1])

      this.self_colList.splice(i + 1, 1, a)
    },

    handleToStatus () {
      let result = []
      this.self_colList.forEach(ele => {

        ele.status = this.colSelected.includes(ele.value) ? true : false

        result.push(ele)
      })

      return result
    },

    handleSure () {

      const params = {
        showColumns: this.handleToStatus(),
        type: this.type
      }
      this.Axios
        .Post('/reportShowColumns/saveOrUpdateShowColumn', params)
        .then(res => {


          if (res.data.status === 1) {
            Message({
              type: 'success',
              message: res.data.message
            })

             this.$emit('update:colList', params.showColumns)
          }

          this.visible = false

        })
    },
  },
}
</script>

<style lang='less'>
.dialog-check-wrap {
  .el-dialog__body {
    padding: 20px 0 5px 0 !important;
  }
  .dialog-check {
    max-height: 400px;
    overflow: auto;

    p {
      padding: 5px 0;
      position: relative;
      position: relative;
      line-height: 30px;
      padding-left: 30px;
      .index {
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -12px;
      }
      img {
        width: 22px;
        height: 22px;
        display: inline-block;
        color: #38f;
        cursor: pointer;
        margin: 0 2px;
      }
      .disable {
        cursor: not-allowed;
      }
    }
  }
}
</style>